.enter-left-bounce { -webkit-animation: enterLeftBounce 1s linear; -moz-animation: enterLeftBounce 1s linear; -ms-animation: enterLeftBounce 1s linear; -o-animation: enterLeftBounce 1s linear; animation: enterLeftBounce 1s linear; opacity: 1!important; } @-webkit-keyframes enterLeftBounce { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(0px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(0px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(0px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(0px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(0px); } 100% { transform:translateX(0); opacity: 1; } } .enter-left-bounce1 { -webkit-animation: enterLeftBounce1 1s linear; -moz-animation: enterLeftBounce1 1s linear; -ms-animation: enterLeftBounce1 1s linear; -o-animation: enterLeftBounce1 1s linear; animation: enterLeftBounce1 1s linear; opacity: 1!important; } @-webkit-keyframes enterLeftBounce1 { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(0px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce1 { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(0px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce1 { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(0px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce1 { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(0px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce1 { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(0px); } 100% { transform:translateX(0); opacity: 1; } } .enter-left-bounce2 { -webkit-animation: enterLeftBounce2 1s linear; -moz-animation: enterLeftBounce2 1s linear; -ms-animation: enterLeftBounce2 1s linear; -o-animation: enterLeftBounce2 1s linear; animation: enterLeftBounce2 1s linear; opacity: 1!important; } @-webkit-keyframes enterLeftBounce2 { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(0px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce2 { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(0px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce2 { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(0px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce2 { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(0px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce2 { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(0px); } 100% { transform:translateX(0); opacity: 1; } } .enter-down-bounce { -webkit-animation: enterDownBounce 1s linear; -moz-animation: enterDownBounce 1s linear; -ms-animation: enterDownBounce 1s linear; -o-animation: enterDownBounce 1s linear; animation: enterDownBounce 1s linear; opacity: 1!important; } @-webkit-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-o-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(0px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } .enter-up-bounce { -webkit-animation: enterUpBounce 1s linear; -moz-animation: enterUpBounce 1s linear; -ms-animation: enterUpBounce 1s linear; -o-animation: enterUpBounce 1s linear; animation: enterUpBounce 1s linear; opacity: 1!important; } @-webkit-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-o-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(0px); } 100% { -moz-transform:translateY(0); opacity: 1; } } .enter-right-bounce { -webkit-animation: enterRightBounce 1s linear; -moz-animation: enterRightBounce 1s linear; -ms-animation: enterRightBounce 1s linear; -o-animation: enterRightBounce 1s linear; animation: enterRightBounce 1s linear; opacity: 1!important; } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } .enter-right-bounce1 { -webkit-animation: enterRightBounce1 1s linear; -moz-animation: enterRightBounce1 1s linear; -ms-animation: enterRightBounce1 1s linear; -o-animation: enterRightBounce1 1s linear; animation: enterRightBounce1 1s linear; opacity: 1!important; } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce1 { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce1 { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce1 { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce1 { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce1 { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } .enter-right-bounce2 { -webkit-animation: enterRightBounce2 1s linear; -moz-animation: enterRightBounce2 1s linear; -ms-animation: enterRightBounce2 1s linear; -o-animation: enterRightBounce2 1s linear; animation: enterRightBounce2 1s linear; opacity: 1!important; } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce2 { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce2 { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce2 { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce2 { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce2 { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } /*! * WickedCSS v1.0 (https://github.com/kristofferandreasen/wickedCSS) * Copyright 2015 Kristoffer Andreasen * MIT License */ /* ========== Rotation ========== */ .rotation{ animation-name: rotation; -webkit-animation-name: rotation; animation-duration: 4s; -webkit-animation-duration: 4s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; visibility: visible !important; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg) translateX(50%) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(50%) rotate(-360deg); } } @keyframes rotation { from { transform: rotate(0deg) translateX(50%) rotate(0deg); } to { transform: rotate(360deg) translateX(50%) rotate(-360deg); } } /* ========== sideToSide ========== */ .sideToSide{ animation-name: sideToSide; -webkit-animation-name: sideToSide; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; visibility: visible !important; } @-webkit-keyframes sideToSide { 0% { -webkit-transform: translate(100%, 0); } 50% { -webkit-transform: translate(-100%, 0); } 100% { -webkit-transform: translate(100%, 0); } } @keyframes sideToSide { 0% { transform: translate(100%, 0); } 50% { transform: translate(-100%, 0); } 100% { transform: translate(100%, 0); } } /* ========== zoomer ========== */ .zoomer{ animation-name: zoomer; -webkit-animation-name: zoomer; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; visibility: visible !important; } @-webkit-keyframes zoomer { 0% { -webkit-transform: scale(.3); } 100% { -webkit-transform: scale(1); } } @keyframes zoomer { 0% { transform: scale(.3); } 100% { transform: scale(1); } } /* ========== zoomerOut ========== */ .zoomerOut{ animation-name: zoomerOut; -webkit-animation-name: zoomerOut; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0); -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; visibility: visible !important; } @-webkit-keyframes zoomerOut { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(0); } } @keyframes zoomerOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } /* ========== spinner ========== */ .spinner{ animation-name: spinner; -webkit-animation-name: spinner; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; visibility: visible !important; } @-webkit-keyframes spinner { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spinner { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } /* ========== pulse ========== */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.9; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.9; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.9; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.9; } } /* ========== shake ========== */ .shake{ animation-name: shake; -webkit-animation-name: shake; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; visibility: visible !important; } @keyframes shake { 0%, 100% {transform: translateX(0);} 16%, 50%, 83% {transform: translateX(-10px);} 33%, 66% {transform: translateX(10px);} } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 16%, 50%, 83% {-webkit-transform: translateX(-10px);} 33%, 66% {-webkit-transform: translateX(10px);} } /* ========== barrelRoll ========== */ .barrelRoll{ animation-name: barrelRoll; -webkit-animation-name: barrelRoll; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; visibility: visible !important; } @keyframes barrelRoll { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @-webkit-keyframes barrelRoll { from { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(360deg) } } /* ========= floater ========= */ .floater{ animation-name: floater; -webkit-animation-name: floater; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes floater { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floater { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ====== wiggle ====== */ .wiggle{ animation-name: wiggle; -webkit-animation-name: wiggle; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes wiggle { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes wiggle { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ====== pound ====== */ .pound{ animation-name: pound; -webkit-animation-name: pound; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes pound { to { transform: scale(1.2); } } @-webkit-keyframes pound { to { transform: scale(1.2); } } /* ====== heartbeat ====== */ .heartbeat{ animation-name: heartbeat; -webkit-animation-name: heartbeat; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; visibility: visible !important; } @keyframes heartbeat { 0% { transform: scale(1); } 10% { transform: scale(1.2); } 20% { transform: scale(1.4); } 100% { transform: scale(1); } } @-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(1); } 10% { -webkit-transform: scale(1.2); } 20% { -webkit-transform: scale(1.4); } 100% { -webkit-transform: scale(1); } } /* ====== rollerRight ====== */ .rollerRight{ animation-name: rollerRight; -webkit-animation-name: rollerRight; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes rollerRight { 0% { transform: translateX(-200px) rotate(0); opacity: 0; } 100% { transform: translateX(0) rotate(2turn); opacity: 1; } } @-webkit-keyframes rollerRight { 0% { -webkit-transform: translateX(-200px) rotate(0); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(2turn); opacity: 1; } } /* ====== rollerLeft ====== */ .rollerLeft{ animation-name: rollerLeft; -webkit-animation-name: rollerLeft; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes rollerLeft { 0% { transform: translateX(200px) rotate(0); opacity: 0; } 100% { transform: translateX(0) rotate(-2turn); opacity: 1; } } @-webkit-keyframes rollerLeft { 0% { -webkit-transform: translateX(200px) rotate(0); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(-2turn); opacity: 1; } } /* ========== Boring ones from here on down ========== */ /* ========== slideDown ========== */ .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideDown { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0%); opacity: 1; } } /* ========== slideUp ========== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideUp { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0%); opacity: 1; } } /* ========== slideLeft ========== */ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideLeft { 0% { transform: translateX(150%); opacity: 0; } 100% { transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); opacity: 0; } 100% { -webkit-transform: translateX(0%); opacity: 1; } } /* ========== slideRight ========== */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @keyframes slideRight { 0% { transform: translateX(-150%); opacity: 0; } 100% { transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); opacity: 0; } 100% { -webkit-transform: translateX(0%); opacity: 1; } } /* ========== fadeIn ========== */ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ========== fadeOut ========== */ .fadeOut{ animation-name: fadeOut; -webkit-animation-name: fadeOut; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* ========== rotateInRight ========== */ .rotateInRight{ animation-name: rotateInRight; -webkit-animation-name: rotateInRight; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes rotateInRight { from { -webkit-transform: rotate(0deg) translateX(100%) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(0) rotate(-360deg); } } @keyframes rotateInRight { from { transform: rotate(0deg) translateX(100%) rotate(0deg); } to { transform: rotate(360deg) translateX(0) rotate(-360deg); } } /* ========== rotateInLeft ========== */ .rotateInLeft{ animation-name: rotateInLeft; -webkit-animation-name: rotateInLeft; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @-webkit-keyframes rotateInLeft { from { -webkit-transform: rotate(0deg) translateX(-100%) rotate(0deg); } to { -webkit-transform: rotate(360deg) translateX(0) rotate(-360deg); } } @keyframes rotateInLeft { from { transform: rotate(0deg) translateX(-100%) rotate(0deg); } to { transform: rotate(360deg) translateX(0) rotate(-360deg); } } /* ========== rotateIn ========== */ .rotateIn { animation-name: rotateIn; -webkit-animation-name: rotateIn; animation-duration: 3s; -webkit-animation-duration: 3s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate3d(0, 0, 1, -720deg); transform: rotate3d(0, 0, 1, -720deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform: rotate3d(0, 0, 1, -720deg); transform: rotate3d(0, 0, 1, -720deg); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } /* ========== bounceIn ========== */ .bounceIn{ -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .8s; animation-duration: .8s; -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .treed { -webkit-perspective:600; -moz-perspective:600; -o-perspective:600; -ms-perspective:600; perspective:600; } .legend-flip:before, .legend-flip { opacity: 1!important; -webkit-perspective: 600; perspective: 600; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; } .legend-flip { opacity: 1!important; -webkit-animation: legendFlip 1.2s ease-out; -moz-animation: legendFlip 1.2s ease-out; -ms-animation: legendFlip 1.2s ease-out; -o-animation: legendFlip 1.2s ease-out; animation: legendFlip 1.2s ease-out; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .legend-flip:before { opacity:1!important; width: 100%; height: 100%; position: absolute; top: 0; -webkit-animation: legendFlipBefore 1.2s ease-out; -moz-animation: legendFlipBefore 1.2s ease-out; -ms-animation: legendFlipBefore 1.2s ease-out; -o-animation: legendFlipBefore 1.2s ease-out; animation: legendFlipBefore 1.2s ease-out; left: 0; background: #00D7D7; content: ""; z-index: 1000; } .rotate-row { border-radius: 100%; overflow: hidden; opacity:1!important; -webkit-animation: rotateRow infinite 20s ease-in; -moz-animation: rotateRow infinite 20s ease-in; -ms-animation: rotateRow infinite 20s ease-in; -o-animation: rotateRow infinite 20s ease-in; animation: rotateRow infinite 20s ease-in } .scale-before:before { opacity:1!important; -webkit-animation: scaleBefore 1 0.5s ease-out; -moz-animation: scaleBefore 1 0.5s ease-out; -ms-animation: scaleBefore 1 0.5s ease-out; -o-animation: scaleBefore 1 0.5s ease-out; animation: scaleBefore 1 0.5s ease-out; } .legend-down:before { opacity:1!important; -webkit-animation: legendDown 1 0.5s ease-out; -moz-animation: legendDown 1 0.5s ease-out; -ms-animation: legendDown 1 0.5s ease-out; -o-animation: legendDown 1 0.5s ease-out; animation: legendDown 1 0.5s ease-out; } .legend-up:before { opacity:1!important; -webkit-animation: legendUp 1 0.5s ease-out; -moz-animation: legendUp 1 0.5s ease-out; -ms-animation: legendUp 1 0.5s ease-out; -o-animation: legendUp 1 0.5s ease-out; animation: legendUp 1 0.5s ease-out; } .legend-left:before { opacity:1!important; -webkit-animation: legendLeft 1 0.5s ease-out; -moz-animation: legendLeft 1 0.5s ease-out; -ms-animation: legendLeft 1 0.5s ease-out; -o-animation: legendLeft 1 0.5s ease-out; animation: legendLeft 1 0.5s ease-out; } .legend-right:before { opacity:1!important; -webkit-animation: legendRight 1 0.5s ease-out; -moz-animation: legendRight 1 0.5s ease-out; -ms-animation: legendRight 1 0.5s ease-out; -o-animation: legendRight 1 0.5s ease-out; animation: legendRight 1 0.5s ease-out; } .scale-before, .legend-down, .legend-up, .legend-left, .portrait-before, .portrait-blur, .legend-right { opacity: 1!important; } .scale-before:before, .legend-down:before, .legend-up:before, .legend-left:before, .legend-right:before { background: rgba(0, 0, 0, 0.5) } .portrait-before:before, .portrait-blur:before, .scale-before:before, .legend-down:before, .legend-up:before, .legend-left:before, .legend-right:before { content: ""; display: block; position: absolute; width: 92%; height: 64%; z-index: 1000; top: 9px; left: 9px; } .portrait-blur:before { opacity: 1!important; box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.5); -webkit-animation: portraitBlur 1 0.6s ease-out; -moz-animation: portraitBlur 1 0.6s ease-out; -ms-animation: portraitBlur 1 0.6s ease-out; -o-animation: portraitBlur 1 0.6s ease-out; animation: portraitBlur 1 0.6s ease-out } .portrait-before:before { opacity: 1!important; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); -webkit-animation: portraitBefore 1 0.3s ease-out; -moz-animation: portraitBefore 1 0.3s ease-out; -ms-animation: portraitBefore 1 0.3s ease-out; -o-animation: portraitBefore 1 0.3s ease-out; animation: portraitBefore 1 0.3s ease-out } .tree-flip { opacity: 1!important; -webkit-animation: treeFlip 1 1s ease-in-out; -moz-animation: treeFlip 1 1s ease-in-out; -ms-animation: treeFlip 1 1s ease-in-out; -o-animation: treeFlip 1 1s ease-in-out; animation: treeFlip 1 1s ease-in-out; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .tree-flip-right { opacity: 1!important; -webkit-animation: treeFlipRight 1 1s ease-in-out; -moz-animation: treeFlipRight 1 1s ease-in-out; -ms-animation: treeFlipRight 1 1s ease-in-out; -o-animation: treeFlipRight 1 1s ease-in-out; animation: treeFlipRight 1 1s ease-in-out; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .tree-flip-up { opacity: 1!important; -webkit-animation: treeFlipUp 1 1s ease-in-out; -moz-animation: treeFlipUp 1 1s ease-in-out; -ms-animation: treeFlipUp 1 1s ease-in-out; -o-animation: treeFlipUp 1 1s ease-in-out; animation: treeFlipUp 1 1s ease-in-out; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -o-transform: rotateX(90deg); -ms-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -o-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .tree-flip-down { opacity: 1!important; -webkit-animation: treeFlipDown 1 1s ease-in-out; -moz-animation: treeFlipDown 1 1s ease-in-out; -ms-animation: treeFlipDown 1 1s ease-in-out; -o-animation: treeFlipDown 1 1s ease-in-out; animation: treeFlipDown 1 1s ease-in-out; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; } .four-rock { opacity: 1!important; -webkit-animation: fourRock 1 2s ease-out; -o-animation: fourRock 1 2s ease-out; -moz-animation: fourRock 1 2s ease-out; -ms-animation: fourRock 1 2s ease-out; animation: fourRock 1 2s ease-out; } .rotate-down-bounce { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: rotateDowBounce 1 2s ease-in; -o-animation: rotateDowBounce 1 2s ease-in; -moz-animation: rotateDowBounce 1 2s ease-in; -ms-animation: rotateDowBounce 1 2s ease-in; animation: rotateDowBounce 1 2s ease-in; opacity: 0; filter:alpha(opacity=0); } .journal { -webkit-animation: journal 2s ease-in; -o-animation: journal 2s ease-in; -moz-animation: journal 2s ease-in; -ms-animation: journal 2s ease-in; animation: journal 2s ease-in; opacity: 1!important; } .flash-bang { opacity: 1!important; -webkit-animation: flashBang 1 2s linear; -o-animation: flashBang 1 2s linear; -moz-animation: flashBang 1 2s linear; -ms-animation: flashBang 1 2s linear; animation: flashBang 1 2s linear; } .dance { opacity: 1!important; -webkit-animation: dance 1 2s linear; -o-animation: dance 1 2s linear; -moz-animation: dance 1 2s linear; -ms-animation: dance 1 2s linear; animation: dance 1 2s linear; } .flip-left { -webkit-animation: flipLeft 1 1s ease-out; -o-animation: flipLeft 1 1s ease-out; -moz-animation: flipLeft 1 1s ease-out; -ms-animation: flipLeft 1 1s ease-out; animation: flipLeft 1 1s ease-out; opacity: 1!important; } .flip-top { -webkit-animation: flipTop 1 1s ease-out; -o-animation: flipTop 1 1s ease-out; -moz-animation: flipTop 1 1s ease-out; -ms-animation: flipTop 1 1s ease-out; animation: flipTop 1 1s ease-out; opacity: 1!important; } .flip-right { -webkit-animation: flipRight 1 1s ease-out; -o-animation: flipRight 1 1s ease-out; -moz-animation: flipRight 1 1s ease-out; -ms-animation: flipRight 1 1s ease-out; animation: flipRight 1 1s ease-out; opacity: 1!important; } .flip-bottom { -webkit-animation: flipBottom 1 2s linear; -o-animation: flipBottom 1 2s linear; -moz-animation: flipBottom 1 2s linear; -ms-animation: flipBottom 1 2s linear; animation: flipBottom 1 2s linear; opacity: 1!important; } .rotate-flip { -webkit-animation: rotateFlip 1 1s linear; -o-animation: rotateFlip 1 1s linear; -moz-animation: rotateFlip 1 1s linear; -ms-animation: rotateFlip 1 1s linear; animation: rotateFlip 1 1s linear; opacity: 1!important; } .rotate-flip-down { opacity: 1!important; -webkit-animation: rotateFlipDown 1 1s linear; -o-animation: rotateFlipDown 1 1s linear; -moz-animation: rotateFlipDown 1 1s linear; -ms-animation: rotateFlipDown 1 1s linear; animation: rotateFlipDown 1 1s linear; } .bomba { -webkit-animation: bomba 1 1s ease-out; -o-animation: bomba 1 1s ease-out; -moz-animation: bomba 1 1s ease-out; -ms-animation: bomba 1 1s ease-out; animation: bomba 1 1s ease-out; opacity: 0; filter:alpha(opacity=0); } .jump-bounce { opacity: 1!important; -webkit-animation: jumpBounce 1 1.5s ease-in; -o-animation: jumpBounce 1 1.5s ease-in; -moz-animation: jumpBounce 1 1.5s ease-in; -ms-animation: jumpBounce 1 1.5s ease-in; animation: jumpBounce 1 1.5s ease-in; } .rotate-out { -webkit-animation: rotateOut 1 1.5s ease-out; -o-animation: rotateOut 1 1.5s ease-out; -moz-animation: rotateOut 1 1.5s ease-out; -ms-animation: rotateOut 1 1.5s ease-out; animation: rotateOut 1 1.5s ease-out; opacity: 0; filter:alpha(opacity=0); } .pulse-slow { -webkit-animation: pulseSlow infinite alternate 1s ease-in-out; -o-animation: pulseSlow infinite alternate 1s ease-in-out; -moz-animation: pulseSlow infinite alternate 1s ease-in-out; -ms-animation: pulseSlow infinite alternate 1s ease-in-out; animation: pulseSlow infinite alternate 1s ease-in-out; } .enter-down-bounce { -webkit-animation: enterDownBounce 1s linear; -moz-animation: enterDownBounce 1s linear; -ms-animation: enterDownBounce 1s linear; -o-animation: enterDownBounce 1s linear; animation: enterDownBounce 1s linear; opacity: 1!important; } .enter-up-bounce { -webkit-animation: enterUpBounce 1s linear; -moz-animation: enterUpBounce 1s linear; -ms-animation: enterUpBounce 1s linear; -o-animation: enterUpBounce 1s linear; animation: enterUpBounce 1s linear; opacity: 1!important; } .enter-left-bounce { -webkit-animation: enterLeftBounce 1s linear; -moz-animation: enterLeftBounce 1s linear; -ms-animation: enterLeftBounce 1s linear; -o-animation: enterLeftBounce 1s linear; animation: enterLeftBounce 1s linear; opacity: 1!important; } .enter-right-bounce { -webkit-animation: enterRightBounce 1s linear; -moz-animation: enterRightBounce 1s linear; -ms-animation: enterRightBounce 1s linear; -o-animation: enterRightBounce 1s linear; animation: enterRightBounce 1s linear; opacity: 1!important; } .scale-bounce { -webkit-animation: scaleBounce 1s linear; -moz-animation: scaleBounce 1s linear; -ms-animation: scaleBounce 1s linear; -o-animation: scaleBounce 1s linear; animation: scaleBounce 1s linear; opacity: 1!important; } .jamp { opacity: 1!important; -webkit-animation: jamp 1s linear; -moz-animation: jamp 1s linear; -ms-animation: jamp 1s linear; -o-animation: jamp 1s linear; animation: jamp 1s linear; } .flip-left-bounce { -webkit-animation: flipLeftBounce 1s ease-in-out; -moz-animation: flipLeftBounce 1s ease-in-out; -ms-animation: flipLeftBounce 1s ease-in-out; -o-animation: flipLeftBounce 1s ease-in-out; animation: flipLeftBounce 1s ease-in-out; opacity: 1!important; } .flip-right-bounce { -webkit-animation: flipRightBounce 1s ease-in-out; -moz-animation: flipRightBounce 1s ease-in-out; -ms-animation: flipRightBounce 1s ease-in-out; -o-animation: flipRightBounce 1s ease-in-out; animation: flipRightBounce 1s ease-in-out; opacity: 1!important; } .pulse { opacity: 1!important; -webkit-animation: pulse infinite alternate linear 0.5s; -moz-animation: pulse infinite alternate linear 0.5s; -o-animation: pulse infinite alternate linear 0.5s; -ms-animation: pulse infinite alternate linear 0.5s; animation: pulse infinite alternate linear 0.5s; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.05); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1.05); } } @-ms-keyframes pulse { 0% { -ms-transform: scale(1); } 100% { -ms-transform: scale(1.05); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 100% { -o-transform: scale(1.05); } } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } /* FLIP RIGHT BOUNCE */ @-webkit-keyframes flipRightBounce { 0% { opacity: 0; -webkit-transform:rotateY(-70deg); } 50% { opacity: 1; -webkit-transform:rotateY(5deg); } 80% { -webkit-transform:rotateY(-20deg); } 100% { -webkit-transform:rotateY(0deg); } } @-moz-keyframes flipRightBounce { 0% { opacity: 0; -moz-transform:rotateY(-70deg); } 50% { opacity: 1; -moz-transform:rotateY(5deg); } 80% { -moz-transform:rotateY(-20deg); } 100% { -moz-transform:rotateY(0deg); } } @-ms-keyframes flipRightBounce { 0% { opacity: 0; -ms-transform:rotateY(-70deg); } 50% { opacity: 1; -ms-transform:rotateY(5deg); } 80% { -ms-transform:rotateY(-20deg); } 100% { -ms-transform:rotateY(0deg); } } @-o-keyframes flipRightBounce { 0% { opacity: 0; -o-transform:rotateY(-70deg); } 50% { opacity: 1; -o-transform:rotateY(5deg); } 80% { -o-transform:rotateY(-20deg); } 100% { -o-transform:rotateY(0deg); } } @keyframes flipRightBounce { 0% { opacity: 0; transform:rotateY(-70deg); } 50% { opacity: 1; transform:rotateY(5deg); } 80% { transform:rotateY(-20deg); } 100% { transform:rotateY(0deg); } } /* FLIP LEFT BOUNCE */ @-webkit-keyframes flipLeftBounce { 0% { opacity: 0; -webkit-transform:rotateY(70deg); } 50% { opacity: 1; -webkit-transform:rotateY(-5deg); } 80% { -webkit-transform:rotateY(20deg); } 100% { -webkit-transform:rotateY(0deg); } } @-moz-keyframes flipLeftBounce { 0% { opacity: 0; -moz-transform:rotateY(70deg); } 50% { opacity: 1; -moz-transform:rotateY(-5deg); } 80% { -moz-transform:rotateY(20deg); } 100% { -moz-transform:rotateY(0deg); } } @-ms-keyframes flipLeftBounce { 0% { opacity: 0; -ms-transform:rotateY(70deg); } 50% { opacity: 1; -ms-transform:rotateY(-5deg); } 80% { -ms-transform:rotateY(20deg); } 100% { -ms-transform:rotateY(0deg); } } @-o-keyframes flipLeftBounce { 0% { opacity: 0; -o-transform:rotateY(70deg); } 50% { opacity: 1; -o-transform:rotateY(-5deg); } 80% { -o-transform:rotateY(20deg); } 100% { -o-transform:rotateY(0deg); } } @keyframes flipLeftBounce { 0% { opacity: 0; transform:rotateY(70deg); } 50% { opacity: 1; transform:rotateY(-5deg); } 80% { transform:rotateY(20deg); } 100% { transform:rotateY(0deg); } } /* JAMP */ @-webkit-keyframes jamp { 0% { -webkit-transform:translateY(0); } 10% { -webkit-transform:translateY(-50px); } 25% { -webkit-transform:translateY(-50px) scale(1.1); } 35% { -webkit-transform:translateY(-50px) scale(1); } 45% { -webkit-transform:translateY(-50px) scale(1.2); } 55% { -webkit-transform:translateY(-50px) scale(1); } 65% { -webkit-transform:translate(150px, -50px) scale(0.8); } 85% { -webkit-transform:translate(150px, -50px) scale(1.2); } 95% { -webkit-transform:translate(0, 0px) scale(1); } 100% { -webkit-transform:translate(0, 0); } } @-moz-keyframes jamp { 0% { -moz-transform:translateY(0); } 10% { -moz-transform:translateY(-50px); } 25% { -moz-transform:translateY(-50px) scale(1.1); } 35% { -moz-transform:translateY(-50px) scale(1); } 45% { -moz-transform:translateY(-50px) scale(1.2); } 55% { -moz-transform:translateY(-50px) scale(1); } 65% { -moz-transform:translate(150px, -50px) scale(0.8); } 85% { -moz-transform:translate(150px, -50px) scale(1.2); } 95% { -moz-transform:translate(0, 0px) scale(1); } 100% { -moz-transform:translate(0, 0); } } @-ms-keyframes jamp { 0% { -ms-transform:translateY(0); } 10% { -ms-transform:translateY(-50px); } 25% { -ms-transform:translateY(-50px) scale(1.1); } 35% { -ms-transform:translateY(-50px) scale(1); } 45% { -ms-transform:translateY(-50px) scale(1.2); } 55% { -ms-transform:translateY(-50px) scale(1); } 65% { -ms-transform:translate(150px, -50px) scale(0.8); } 85% { -ms-transform:translate(150px, -50px) scale(1.2); } 95% { -ms-transform:translate(0, 0px) scale(1); } 100% { -ms-transform:translate(0, 0); } } @-o-keyframes jamp { 0% { -o-transform:translateY(0); } 10% { -o-transform:translateY(-50px); } 25% { -o-transform:translateY(-50px) scale(1.1); } 35% { -o-transform:translateY(-50px) scale(1); } 45% { -o-transform:translateY(-50px) scale(1.2); } 55% { -o-transform:translateY(-50px) scale(1); } 65% { -o-transform:translate(150px, -50px) scale(0.8); } 85% { -o-transform:translate(150px, -50px) scale(1.2); } 95% { -o-transform:translate(0, 0px) scale(1); } 100% { -o-transform:translate(0, 0); } } @keyframes jamp { 0% { transform:translateY(0); } 10% { transform:translateY(-50px); } 25% { transform:translateY(-50px) scale(1.1); } 35% { transform:translateY(-50px) scale(1); } 45% { transform:translateY(-50px) scale(1.2); } 55% { transform:translateY(-50px) scale(1); } 65% { transform:translate(150px, -50px) scale(0.8); } 85% { transform:translate(150px, -50px) scale(1.2); } 95% { transform:translate(0, 0px) scale(1); } 100% { transform:translate(0, 0); } } /* SCALE BOUNCE */ @-webkit-keyframes scaleBounce { 0% { -webkit-transform:scale(1.5); opacity: 0; } 50% { -webkit-transform:scale(1); } 70% { -webkit-transform:scale(1.1); } 100% { opacity: 1; -webkit-transform:scale(1); } } @-moz-keyframes scaleBounce { 0% { -moz-transform:scale(1.5); opacity: 0; } 50% { -moz-transform:scale(1); } 70% { -moz-transform:scale(1.1); } 100% { opacity: 1; -moz-transform:scale(1); } } @-o-keyframes scaleBounce { 0% { -o-transform:scale(1.5); opacity: 0; } 50% { -o-transform:scale(1); } 70% { -o-transform:scale(1.1); } 100% { opacity: 1; -o-transform:scale(1); } } @-ms-keyframes scaleBounce { 0% { -ms-transform:scale(1.5); opacity: 0; } 50% { -ms-transform:scale(1); } 70% { -ms-transform:scale(1.1); } 100% { opacity: 1; -ms-transform:scale(1); } } @keyframes scaleBounce { 0% { transform:scale(1.5); opacity: 0; } 50% { transform:scale(1); } 70% { transform:scale(1.1); } 100% { opacity: 1; transform:scale(1); } } /* ENTER RIGHT BOUNCE */ @-webkit-keyframes enterRightBounce { 0% { -webkit-transform:translateX(220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterRightBounce { 0% { -moz-transform:translateX(220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterRightBounce { 0% { -o-transform:translateX(220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterRightBounce { 0% { -ms-transform:translateX(220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterRightBounce { 0% { transform:translateX(220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(8px); } 100% { transform:translateX(0); opacity: 1; } } /* ENTER LEFT BOUNCE */ @-webkit-keyframes enterLeftBounce { 0% { -webkit-transform:translateX(-220px); opacity: 0; } 50% { -webkit-transform:translateX(0px); } 70% { -webkit-transform:translateX(-8px); } 100% { -webkit-transform:translateX(0); opacity: 1; } } @-moz-keyframes enterLeftBounce { 0% { -moz-transform:translateX(-220px); opacity: 0; } 50% { -moz-transform:translateX(0px); } 70% { -moz-transform:translateX(-8px); } 100% { -moz-transform:translateX(0); opacity: 1; } } @-o-keyframes enterLeftBounce { 0% { -o-transform:translateX(-220px); opacity: 0; } 50% { -o-transform:translateX(0px); } 70% { -o-transform:translateX(-8px); } 100% { -o-transform:translateX(0); opacity: 1; } } @-ms-keyframes enterLeftBounce { 0% { -ms-transform:translateX(-220px); opacity: 0; } 50% { -ms-transform:translateX(0px); } 70% { -ms-transform:translateX(-8px); } 100% { -ms-transform:translateX(0); opacity: 1; } } @keyframes enterLeftBounce { 0% { transform:translateX(-220px); opacity: 0; } 50% { transform:translateX(0px); } 70% { transform:translateX(-8px); } 100% { transform:translateX(0); opacity: 1; } } /* ENTER UP BOUNCE */ @-webkit-keyframes enterUpBounce { 0% { -webkit-transform:translateY(220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(20px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterUpBounce { 0% { -moz-transform:translateY(220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(20px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-o-keyframes enterUpBounce { 0% { -o-transform:translateY(220px); opacity: 0; } 50% { -o-transform:translateY(0px); } 70% { -o-transform:translateY(20px); } 100% { -o-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterUpBounce { 0% { -ms-transform:translateY(220px); opacity: 0; } 50% { -ms-transform:translateY(0px); } 70% { -ms-transform:translateY(20px); } 100% { -ms-transform:translateY(0); opacity: 1; } } @keyframes enterUpBounce { 0% { transform:translateY(220px); opacity: 0; } 50% { transform:translateY(0px); } 70% { transform:translateY(20px); } 100% { transform:translateY(0); opacity: 1; } } /* ENTER DOWN BOUNCE */ @-webkit-keyframes enterDownBounce { 0% { -webkit-transform:translateY(-220px); opacity: 0; } 50% { -webkit-transform:translateY(0px); } 70% { -webkit-transform:translateY(-20px); } 100% { -webkit-transform:translateY(0); opacity: 1; } } @-moz-keyframes enterDownBounce { 0% { -moz-transform:translateY(-220px); opacity: 0; } 50% { -moz-transform:translateY(0px); } 70% { -moz-transform:translateY(-20px); } 100% { -moz-transform:translateY(0); opacity: 1; } } @-ms-keyframes enterDownBounce { 0% { -ms-transform:translateY(-220px); opacity: 0; } 50% { -ms-transform:translateY(0px); } 70% { -ms-transform:translateY(-20px); } 100% { -ms-transform:translateY(0); opacity: 1; } } @-o-keyframes enterDownBounce { 0% { -o-transform:translateY(-220px); opacity: 0; } 50% { -o-transform:translateY(0px); } 70% { -o-transform:translateY(-20px); } 100% { -o-transform:translateY(0); opacity: 1; } } @keyframes enterDownBounce { 0% { transform:translateY(-220px); opacity: 0; } 50% { transform:translateY(0px); } 70% { transform:translateY(-20px); } 100% { transform:translateY(0); opacity: 1; } } /* ROTATE DOWN */ @-webkit-keyframes pulseSlow { 0% { -webkit-transform:scale(1); opacity: 1; } 100% { -webkit-transform:scale(0.85); opacity: 0.5; } } @-moz-keyframes pulseSlow { 0% { -moz-transform:scale(1); opacity: 1; } 100% { -moz-transform:scale(0.85); opacity: 0.5; } } @-ms-keyframes pulseSlow { 0% { -ms-transform:scale(1); opacity: 1; } 100% { -ms-transform:scale(0.85); opacity: 0.5; } } @-o-keyframes pulseSlow { 0% { -o-transform:scale(1); opacity: 1; } 100% { -o-transform:scale(0.85); opacity: 0.5; } } @keyframes pulseSlow { 0% { transform:scale(1); opacity: 1; } 100% { transform:scale(0.85); opacity: 0.5; } } /* ROTATE DOWN */ @-webkit-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -webkit-transform:scale(0) rotateY(189deg); } } @-moz-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -moz-transform:scale(0) rotateY(189deg); } } @-ms-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -ms-transform:scale(0) rotateY(189deg); } } @-o-keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { -o-transform:scale(0) rotateY(189deg); } } @keyframes rotateOut { 0% { opacity: 1; } 50%, 100% { transform:scale(0) rotateY(189deg); } } /* TREE FLIP DOWN */ @-webkit-keyframes treeFlipDown { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(-90deg); } } @-moz-keyframes treeFlipDown { 0% { -moz-transform: rotateX(0); } 100% { -moz-transform: rotateX(-90deg); } } @-ms-keyframes treeFlipDown { 0% { -ms-transform: rotateX(0); } 100% { -ms-transform: rotateX(-90deg); } } @-o-keyframes treeFlipDown { 0% { -o-transform: rotateX(0); } 100% { -o-transform: rotateX(-90deg); } } @keyframes treeFlipDown { 0% { transform: rotateX(0); } 100% { transform: rotateX(-90deg); } } /* TREE FLIP UP */ @-webkit-keyframes treeFlipUp { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(90deg); } } @-moz-keyframes treeFlipUp { 0% { -moz-transform: rotateX(0); } 100% { -moz-transform: rotateX(90deg); } } @-ms-keyframes treeFlipUp { 0% { -ms-transform: rotateX(0); } 100% { -ms-transform: rotateX(90deg); } } @-o-keyframes treeFlipUp { 0% { -o-transform: rotateX(0); } 100% { -o-transform: rotateX(90deg); } } @keyframes treeFlipUp { 0% { transform: rotateX(0); } 100% { transform: rotateX(90deg); } } /* TREE FLIP RIGHT */ @-webkit-keyframes treeFlipRight { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(90deg); } } @-moz-keyframes treeFlipRight { 0% { -moz-transform: rotateY(0); } 100% { -moz-transform: rotateY(90deg); } } @-ms-keyframes treeFlipRight { 0% { -ms-transform: rotateY(0); } 100% { -ms-transform: rotateY(90deg); } } @-o-keyframes treeFlipRight { 0% { -o-transform: rotateY(0); } 100% { -o-transform: rotateY(90deg); } } @keyframes treeFlipRight { 0% { transform: rotateY(0); } 100% { transform: rotateY(90deg); } } /* TREE FLIP */ @-webkit-keyframes treeFlip { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(-90deg); } } @-moz-keyframes treeFlip { 0% { -moz-transform: rotateY(0); } 100% { -moz-transform: rotateY(-90deg); } } @-ms-keyframes treeFlip { 0% { -ms-transform: rotateY(0); } 100% { -ms-transform: rotateY(-90deg); } } @-o-keyframes treeFlip { 0% { -o-transform: rotateY(0); } 100% { -o-transform: rotateY(-90deg); } } @keyframes treeFlip { 0% { transform: rotateY(0); } 100% { transform: rotateY(-90deg); } } /* JUMP BOUNCE */ @-webkit-keyframes jumpBounce { 10% { -webkit-transform:translateY(-150px); } 20%, 35%, 50% { -webkit-transform:translateY(0px); } 25% { -webkit-transform:translateY(-60px); } 40% { -webkit-transform:translateY(-40px); } } @-moz-keyframes jumpBounce { 10% { -moz-transform:translateY(-150px); } 20%, 35%, 50% { -moz-transform:translateY(0px); } 25% { -moz-transform:translateY(-60px); } 40% { -moz-transform:translateY(-40px); } } @-ms-keyframes jumpBounce { 10% { -ms-transform:translateY(-150px); } 20%, 35%, 50% { -ms-transform:translateY(0px); } 25% { -ms-transform:translateY(-60px); } 40% { -ms-transform:translateY(-40px); } } @-o-keyframes jumpBounce { 10% { -o-transform:translateY(-150px); } 20%, 35%, 50% { -o-transform:translateY(0px); } 25% { -o-transform:translateY(-60px); } 40% { -o-transform:translateY(-40px); } } @keyframes jumpBounce { 10% { transform:translateY(-150px); } 20%, 35%, 50% { transform:translateY(0px); } 25% { transform:translateY(-60px); } 40% { transform:translateY(-40px); } } /* FOUR ROCK */ @-webkit-keyframes fourRock { 0% { -webkit-transform-origin: 0 0; } 5% { -webkit-transform: scale(0.5); } 10% { -webkit-transform: scale(0.5) } 15% { -webkit-transform: scale(0.5) translateX(130px); } 20% { -webkit-transform: scale(0.5) translateX(130px); } 25% { -webkit-transform: scale(0.5) translate(130px, 130px); } 30% { -webkit-transform: scale(0.5) translate(0px, 130px); } 35% { -webkit-transform: scale(0.5) translate(0px, 0px); } 40% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); -webkit-transform-origin: 0 0; } } @-moz-keyframes fourRock { 0% { -moz-transform-origin: 0 0; } 5% { -moz-transform: scale(0.5); } 10% { -moz-transform: scale(0.5) } 15% { -moz-transform: scale(0.5) translateX(130px); } 20% { -moz-transform: scale(0.5) translateX(130px); } 25% { -moz-transform: scale(0.5) translate(130px, 130px); } 30% { -moz-transform: scale(0.5) translate(0px, 130px); } 35% { -moz-transform: scale(0.5) translate(0px, 0px); } 40% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1); -webkit-transform-origin: 0 0; } } @-ms-keyframes fourRock { 0% { -ms-transform-origin: 0 0; } 5% { -ms-transform: scale(0.5); } 10% { -ms-transform: scale(0.5) } 15% { -ms-transform: scale(0.5) translateX(130px); } 20% { -ms-transform: scale(0.5) translateX(130px); } 25% { -ms-transform: scale(0.5) translate(130px, 130px); } 30% { -ms-transform: scale(0.5) translate(0px, 130px); } 35% { -ms-transform: scale(0.5) translate(0px, 0px); } 40% { -ms-transform: scale(1); } 100% { -ms-transform: scale(1); -webkit-transform-origin: 0 0; } } @-o-keyframes fourRock { 0% { -o-transform-origin: 0 0; } 5% { -o-transform: scale(0.5); } 10% { -o-transform: scale(0.5) } 15% { -o-transform: scale(0.5) translateX(130px); } 20% { -o-transform: scale(0.5) translateX(130px); } 25% { -o-transform: scale(0.5) translate(130px, 130px); } 30% { -o-transform: scale(0.5) translate(0px, 130px); } 35% { -o-transform: scale(0.5) translate(0px, 0px); } 40% { -o-transform: scale(1); } 100% { -o-transform: scale(1); -webkit-transform-origin: 0 0; } } @keyframes fourRock { 0% { transform-origin: 0 0; } 5% { transform: scale(0.5); } 10% { transform: scale(0.5) } 15% { transform: scale(0.5) translateX(130px); } 20% { transform: scale(0.5) translateX(130px); } 25% { transform: scale(0.5) translate(130px, 130px); } 30% { transform: scale(0.5) translate(0px, 130px); } 35% { transform: scale(0.5) translate(0px, 0px); } 40% { transform: scale(1); } 100% { transform: scale(1); -webkit-transform-origin: 0 0; } } /* BOMBA */ @-webkit-keyframes bomba { 0% { -webkit-transform-origin: -50% 0%; -webkit-transform: rotateZ(0); opacity: 1; } 50%, 100% { -webkit-transform: rotateZ(-210deg); -webkit-transform-origin: -20% 0%; } 47%, 100% { opacity: 0; } } @-moz-keyframes bomba { 0% { -moz-transform-origin: -20% 0%; -moz-transform: rotateZ(0); opacity: 1; } 50%, 100% { -moz-transform: rotateZ(-210deg); -moz-transform-origin: -20% 0%; } } @-ms-keyframes bomba { 0% { -ms-transform-origin: -20% 0%; -ms-transform: rotateZ(0); opacity: 1; } 50%, 100% { -ms-transform: rotateZ(-210deg); -ms-transform-origin: -20% 0%; } } @-o-keyframes bomba { 0% { -o-transform-origin: -20% 0%; -o-transform: rotateZ(0); opacity: 1; } 50%, 100% { -o-transform: rotateZ(-210deg); -o-transform-origin: -20% 0%; } } @keyframes bomba { 0% { transform-origin: -20% 0%; transform: rotateZ(0); opacity: 1; } 50%, 100% { transform: rotateZ(-210deg); transform-origin: -20% 0%; } } /* ROTATE FLIP */ @-webkit-keyframes rotateFlipDown { 0% { -webkit-transform-origin: 50%; } 40% { -webkit-transform: rotateX(70deg); opacity: 0; } 60% { -webkit-transform: rotateX(70deg); opacity: 0; } 100% { -webkit-transform: rotateX(0deg); opacity: 1; } } @-moz-keyframes rotateFlipDown { 0% { -moz-transform-origin: 50%; } 40% { -moz-transform: rotateX(70deg); opacity: 0; } 60% { -moz-transform: rotateX(70deg); opacity: 0; } 100% { -moz-transform: rotateX(0deg); opacity: 1; } } @-ms-keyframes rotateFlipDown { 0% { -ms-transform-origin: 50%; } 40% { -ms-transform: rotateX(70deg); opacity: 0; } 60% { -ms-transform: rotateX(70deg); opacity: 0; } 100% { -ms-transform: rotateX(0deg); opacity: 1; } } @-o-keyframes rotateFlipDown { 0% { -o-transform-origin: 50%; } 40% { -o-transform: rotateX(70deg); opacity: 0; } 60% { -o-transform: rotateX(70deg); opacity: 0; } 100% { -o-transform: rotateX(0deg); opacity: 1; } } @keyframes rotateFlipDown { 0% { transform-origin: 50%; } 40% { transform: rotateX(70deg); opacity: 0; } 60% { transform: rotateX(70deg); opacity: 0; } 100% { transform: rotateX(0deg); opacity: 1; } } /* ROTATE FLIP */ @-webkit-keyframes rotateFlip { 0% { -webkit-transform-origin: 50%; } 40% { -webkit-transform: rotateY(70deg); opacity: 0; } 60% { -webkit-transform: rotateY(70deg); opacity: 0; } 100% { -webkit-transform: rotateY(0deg); opacity: 1; } } @-moz-keyframes rotateFlip { 0% { -moz-transform-origin: 50%; } 40% { -moz-transform: rotateY(70deg); opacity: 0; } 60% { -moz-transform: rotateY(70deg); opacity: 0; } 100% { -moz-transform: rotateY(0deg); opacity: 1; } } @-ms-keyframes rotateFlip { 0% { -ms-transform-origin: 50%; } 40% { -ms-transform: rotateY(70deg); opacity: 0; } 60% { -ms-transform: rotateY(70deg); opacity: 0; } 100% { -ms-transform: rotateY(0deg); opacity: 1; } } @-o-keyframes rotateFlip { 0% { -o-transform-origin: 50%; } 40% { -o-transform: rotateY(70deg); opacity: 0; } 60% { -o-transform: rotateY(70deg); opacity: 0; } 100% { -o-transform: rotateY(0deg); opacity: 1; } } @keyframes rotateFlip { 0% { transform-origin: 50%; } 40% { transform: rotateY(70deg); opacity: 0; } 60% { transform: rotateY(70deg); opacity: 0; } 100% { transform: rotateY(0deg); opacity: 1; } } /* FLIP BOTTOM */ @-webkit-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @-moz-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @-ms-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @-o-keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } @keyframes flipBottom { 0% { transform: translateY(100px); opacity: 0; } 70% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(0); } } /* FLIP RIGHT */ @-webkit-keyframes flipRight { 0% { -webkit-transform: translateX(100px); opacity: 0; } 70% { -webkit-transform: translateX(0); opacity: 1; } } @-moz-keyframes flipRight { 0% { -moz-transform: translateX(100px); opacity: 0; } 70% { -moz-transform: translateX(0); opacity: 1; } } @-ms-keyframes flipRight { 0% { -ms-transform: translateX(100px); opacity: 0; } 70% { -ms-transform: translateX(0); opacity: 1; } } @-o-keyframes flipRight { 0% { -o-transform: translateX(100px); opacity: 0; } 70% { -o-transform: translateX(0); opacity: 1; } } @keyframes flipRight { 0% { transform: translateX(100px); opacity: 0; } 70% { transform: translateX(0); opacity: 1; } } /* FLIP TOP */ @-webkit-keyframes flipTop { 0% { -webkit-transform: translateY(-100px); opacity: 0; } 70% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes flipTop { 0% { -moz-transform: translateY(-100px); opacity: 0; } 70% { -moz-transform: translateY(0); opacity: 1; } } @-ms-keyframes flipTop { 0% { -ms-transform: translateY(-100px); opacity: 0; } 70% { -ms-transform: translateY(0); opacity: 1; } } @-o-keyframes flipTop { 0% { -o-transform: translateY(-100px); opacity: 0; } 70% { -o-transform: translateY(0); opacity: 1; } } @keyframes flipTop { 0% { transform: translateY(-100px); opacity: 0; } 70% { transform: translateY(0); opacity: 1; } } /* FLIP LEFT */ @-webkit-keyframes flipLeft { 0% { -webkit-transform: translateX(-100px); opacity: 0; } 70% { -webkit-transform: translateX(0); opacity: 1; } } @-moz-keyframes flipLeft { 0% { -moz-transform: translateX(-100px); opacity: 0; } 70% { -moz-transform: translateX(0); opacity: 1; } } @-ms-keyframes flipLeft { 0% { -ms-transform: translateX(-100px); opacity: 0; } 70% { -ms-transform: translateX(0); opacity: 1; } } @-o-keyframes flipLeft { 0% { -o-transform: translateX(-100px); opacity: 0; } 70% { -o-transform: translateX(0); opacity: 1; } } @keyframes flipLeft { 0% { transform: translateX(-100px); opacity: 0; } 70% { transform: translateX(0); opacity: 1; } } /* JOURNAL */ @-webkit-keyframes journal { 0% { -webkit-transform: scale(0) rotate(-360deg); } 80% { -webkit-transform: scale(0.5) rotate(-180deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes journal { 0% { -moz-transform: scale(0) rotate(-360deg); } 80% { -moz-transform: scale(0.5) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-ms-keyframes journal { 0% { -ms-transform: scale(0) rotate(-360deg); } 80% { -ms-transform: scale(0.5) rotate(-180deg); } 100% { -ms-transform: scale(1) rotate(0); } } @-o-keyframes journal { 0% { -o-transform: scale(0) rotate(-360deg); } 80% { -o-transform: scale(0.5) rotate(-180deg); } 100% { -o-transform: scale(1) rotate(0); } } @keyframes journal { 0% { transform: scale(0) rotate(-360deg); } 80% { transform: scale(0.5) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } } /* DANCE */ @-webkit-keyframes dance { 0%, 10%, 20% { -webkit-transform:rotateZ(10deg); } 5%, 15%, 25% { -webkit-transform:rotateZ(-10deg) } 35%, 60%, 100% { -webkit-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -webkit-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @-moz-keyframes dance { 0%, 10%, 20% { -moz-transform:rotateZ(10deg); } 5%, 15%, 25% { -moz-transform:rotateZ(-10deg) } 35%, 60%, 100% { -moz-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -moz-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @-ms-keyframes dance { 0%, 10%, 20% { -ms-transform:rotateZ(10deg); } 5%, 15%, 25% { -ms-transform:rotateZ(-10deg) } 35%, 60%, 100% { -ms-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -ms-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @-o-keyframes dance { 0%, 10%, 20% { -o-transform:rotateZ(10deg); } 5%, 15%, 25% { -o-transform:rotateZ(-10deg) } 35%, 60%, 100% { -o-transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { -o-transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } @keyframes dance { 0%, 10%, 20% { transform:rotateZ(10deg); } 5%, 15%, 25% { transform:rotateZ(-10deg) } 35%, 60%, 100% { transform:scale(1) rotateZ(0deg); box-shadow:inset 0 0 0 0 transparent; } 40% { transform:scale(1.3); box-shadow:inset 0 0 0 0; box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1); } } /* FLASH BANG */ @-webkit-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-moz-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-ms-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-o-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } /* ROTATE DOW BOUNCE */ @-webkit-keyframes rotateDowBounce { 0% { -webkit-transform: rotate(0deg); opacity: 1; } 20% { -webkit-transform: rotate(25deg); } 40% { -webkit-transform:rotate(30deg); } 10%, 30%, 50% { -webkit-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -webkit-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @-moz-keyframes rotateDowBounce { 0% { -moz-transform: rotate(0deg); opacity: 1; } 20% { -moz-transform: rotate(25deg); } 40% { -moz-transform:rotate(30deg); } 10%, 30%, 50% { -moz-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -moz-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @-ms-keyframes rotateDowBounce { 0% { -ms-transform: rotate(0deg); opacity: 1; } 20% { -ms-transform: rotate(25deg); } 40% { -ms-transform:rotate(30deg); } 10%, 30%, 50% { -ms-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -ms-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @-o-keyframes rotateDowBounce { 0% { -o-transform: rotate(0deg); opacity: 1; } 20% { -o-transform: rotate(25deg); } 40% { -o-transform:rotate(30deg); } 10%, 30%, 50% { -o-transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { -o-transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } @keyframes rotateDowBounce { 0% { transform: rotate(0deg); opacity: 1; } 20% { transform: rotate(25deg); } 40% { transform:rotate(30deg); } 10%, 30%, 50% { transform: rotate(40deg); opacity: 1; filter:alpha(opacity=100); } 80%, 100% { transform: rotate(30deg) translateY(310px) translateX(230px); opacity: 0; filter:alpha(opacity=0); } } /* ROTATE ROW */ @-webkit-keyframes rotateRow { 0% { -webkit-transform: translateY(0); } 0.5% { -webkit-transform: translateY(-20px); } 1% { -webkit-transform: translateY(0px); } 100% { -webkit-transform:rotate(20000deg); } } @-moz-keyframes rotateRow { 0% { -moz-transform: translateY(0); } 0.5% { -moz-transform: translateY(-20px); } 1% { -moz-transform: translateY(0px); } 100% { -moz-transform:rotate(20000deg); } } @-ms-keyframes rotateRow { 0% { -ms-transform: translateY(0); } 0.5% { -ms-transform: translateY(-20px); } 1% { -ms-transform: translateY(0px); } 100% { -ms-transform:rotate(20000deg); } } @-o-keyframes rotateRow { 0% { -o-transform: translateY(0); } 0.5% { -o-transform: translateY(-20px); } 1% { -o-transform: translateY(0px); } 100% { -o-transform:rotate(20000deg); } } @-keyframes rotateRow { 0% { transform: translateY(0); } 0.5% { transform: translateY(-20px); } 1% { transform: translateY(0px); } 100% { transform:rotate(20000deg); } } /* PORTRAIT BEFORE */ @-webkit-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @-moz-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @-ms-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @-o-keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } @keyframes portraitBefore { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } /* SCALE BEFORE */ @-webkit-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @-moz-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @-ms-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @-o-keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } @keyframes scaleBefore { 0% { -webkit-transform:scale(1.5); } 100% { -webkit-transform:scale(1); } } /* LEGEND DOWN */ @-webkit-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @-moz-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @-ms-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @-o-keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } @keyframes legendDown { 0% { top:0; height: 0; } 100% { height: 64%; top: 9px; } } /* LEGEND Up */ @-webkit-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @-moz-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @-ms-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @-o-keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } @keyframes legendUp { 0% { top:70%; height: 0; } 100% { height: 64%; top: 9px; } } /* LEGEND LEFT */ @-webkit-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @-moz-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @-ms-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @-o-keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } @keyframes legendLeft { 0% { left:0%; width: 0; } 100% { left: 9px; width: 92%; } } /* LEGEND RIGHT */ @-webkit-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @-moz-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @-ms-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @-o-keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } @keyframes legendRight { 0% { left:100%; width: 0; } 100% { left: 9px; width: 92%; } } /* LEGEND FLIP BEFORE */ @-webkit-keyframes legendFlipBefore { 0% { -webkit-transform:rotateY(-180deg); } 60% { -webkit-transform:rotateY(30deg); } 80% { -webkit-transform:rotateY(-30deg); } 100% { -webkit-transform:rotateY(0); } } @-moz-keyframes legendFlipBefore { 0% { -moz-transform:rotateY(-180deg); } 60% { -moz-transform:rotateY(30deg); } 80% { -moz-transform:rotateY(-30deg); } 100% { -moz-transform:rotateY(0); } } @-ms-keyframes legendFlipBefore { 0% { -ms-transform:rotateY(-180deg); } 60% { -ms-transform:rotateY(30deg); } 80% { -ms-transform:rotateY(-30deg); } 100% { -ms-transform:rotateY(0); } } @-o-keyframes legendFlipBefore { 0% { -o-transform:rotateY(-180deg); } 60% { -o-transform:rotateY(30deg); } 80% { -o-transform:rotateY(-30deg); } 100% { -o-transform:rotateY(0); } } @keyframes legendFlipBefore { 0% { transform:rotateY(-180deg); } 60% { transform:rotateY(30deg); } 80% { transform:rotateY(-30deg); } 100% { transform:rotateY(0); } } /* LEGEND FLIP */ @-webkit-keyframes legendFlip { 0% { -webkit-transform:rotateY(0); } 60% { -webkit-transform:rotateY(-210deg); } 100% { -webkit-transform:rotateY(-150deg); } 100% { -webkit-transform:rotateY(-180deg); } } @-moz-keyframes legendFlip { 0% { -moz-transform:rotateY(0); } 60% { -moz-transform:rotateY(-210deg); } 100% { -moz-transform:rotateY(-150deg); } 100% { -moz-transform:rotateY(-180deg); } } @-ms-keyframes legendFlip { 0% { -ms-transform:rotateY(0); } 60% { -ms-transform:rotateY(-210deg); } 100% { -ms-transform:rotateY(-150deg); } 100% { -ms-transform:rotateY(-180deg); } } @-o-keyframes legendFlip { 0% { -o-transform:rotateY(0); } 60% { -o-transform:rotateY(-210deg); } 100% { -o-transform:rotateY(-150deg); } 100% { -o-transform:rotateY(-180deg); } } @keyframes legendFlip { 0% { transform:rotateY(0); } 60% { transform:rotateY(-210deg); } 100% { transform:rotateY(-150deg); } 100% { transform:rotateY(-180deg); } } /* LEGEND FLIP */ @-webkit-keyframes portraitBlur { 0% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5); width: 100%; height: 74%; top: 0; left: 0; } 100% { box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.5); width: 92%; height: 64%; top: 9px; left: 9px; } } /* Vivify version: 1.0 Licensed under the MIT license - http://opensource.org/licenses/MIT The MIT License Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* Copyright (c) 2017 Martin Knize. */ .vivify { -webkit-animation-duration: .8s; -webkit-animation-fill-mode: both; animation-duration: .8s; animation-fill-mode: both; } .infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .pulsate { -webkit-animation-name: pulsate; animation-name: pulsate; -webkit-transform-origin: center; transform-origin: center; } @keyframes pulsate { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } 100% { -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .blink { -webkit-animation-name: blink; animation-name: blink; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; } } .hitLeft { -webkit-animation-name: hitLeft; animation-name: hitLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes hitLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translateX(20px) rotate(4deg); transform: translateX(20px) rotate(4deg); } } .hitRight { -webkit-animation-name: hitRight; animation-name: hitRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes hitRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translateX(-20px) rotate(-4deg); transform: translateX(-20px) rotate(-4deg); } } .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } @keyframes shake { 10% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20% { -webkit-transform: translateX(10px); transform: translateX(10px); } 30% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 40% { -webkit-transform: translateX(10px); transform: translateX(10px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 60% { -webkit-transform: translateX(10px); transform: translateX(10px); } 70% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } } .ball { -webkit-animation-name: ball; animation-name: ball; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes ball { 0% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 20% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); } 40% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 75% { -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 85% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .pullUp { -webkit-animation-name: pullUp; animation-name: pullUp; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullUp { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullDown { -webkit-animation-name: pullDown; animation-name: pullDown; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullDown { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: center top; transform-origin: center top; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullLeft { -webkit-animation-name: pullLeft; animation-name: pullLeft; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullLeft { 0% { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center left; transform-origin: center left; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pullRight { -webkit-animation-name: pullRight; animation-name: pullRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes pullRight { 0% { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); } 50% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center right; transform-origin: center right; } 100% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .jumpInLeft { -webkit-animation-name: jumpInLeft; animation-name: jumpInLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } 50% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 70% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 90% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpInRight { -webkit-animation-name: jumpInRight; animation-name: jumpInRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } 50% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 70% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 90% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } } .jumpOutRight { -webkit-animation-name: jumpOutRight; animation-name: jumpOutRight; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpOutRight { 0% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } 30% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(5deg); } 70% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg); } 100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(90deg); } } .jumpOutLeft { -webkit-animation-name: jumpOutLeft; animation-name: jumpOutLeft; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes jumpOutLeft { 0% { -webkit-transform: scale3d(1, 1, 1) rotate(0deg); transform: scale3d(1, 1, 1) rotate(0deg); } 30% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg); } 70% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); transform: scale3d(1.2, 1.2, 1.2) rotate(10deg); } 100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg); } } .rollInLeft { -webkit-animation-name: rollInLeft; animation-name: rollInLeft; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(-100px) rotate(445deg); transform: translateX(-100px) rotate(445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateX(20px) rotate(20deg); transform: translateX(20px) rotate(20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } .rollInRight { -webkit-animation-name: rollInRight; animation-name: rollInRight; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(400px) rotate(-445deg); transform: translateX(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateX(-20px) rotate(-20deg); transform: translateX(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } } .rollInTop { -webkit-animation-name: rollInTop; animation-name: rollInTop; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(-400px) rotate(-445deg); transform: translateY(-400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateY(20px) rotate(-20deg); transform: translateY(20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } } .rollInBottom { -webkit-animation-name: rollInBottom; animation-name: rollInBottom; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollInBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(400px) rotate(-445deg); transform: translateY(400px) rotate(-445deg); opacity: 0; } 30% { opacity: 1; } 50% { -webkit-transform: translateY(-20px) rotate(-20deg); transform: translateY(-20px) rotate(-20deg); } 100% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } } .rollOutLeft { -webkit-animation-name: rollOutLeft; animation-name: rollOutLeft; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutLeft { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateX(20px) rotate(-20deg); transform: translateX(20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(-400px) rotate(-445deg); transform: translateX(-400px) rotate(-445deg); } } .rollOutRight { -webkit-animation-name: rollOutRight; animation-name: rollOutRight; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutRight { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateX(-20px) rotate(20deg); transform: translateX(-20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateX(400px) rotate(445deg); transform: translateX(400px) rotate(445deg); } } .rollOutTop { -webkit-animation-name: rollOutTop; animation-name: rollOutTop; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutTop { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateY(20px) rotate(20deg); transform: translateY(20px) rotate(20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(-400px) rotate(445deg); transform: translateY(-400px) rotate(445deg); } } .rollOutBottom { -webkit-animation-name: rollOutBottom; animation-name: rollOutBottom; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @keyframes rollOutBottom { 0% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 40% { opacity: 1; -webkit-transform: translateY(-20px) rotate(-20deg); transform: translateY(-20px) rotate(-20deg); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translateY(400px) rotate(-445deg); transform: translateY(400px) rotate(-445deg); } } .popIn { -webkit-animation-name: popIn; animation-name: popIn; } @keyframes popIn { 0% { -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); opacity: 0; } 20% { opacity: 1; } 40% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInLeft { -webkit-animation-name: popInLeft; animation-name: popInLeft; } @keyframes popInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1); } 40% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInRight { -webkit-animation-name: popInRight; animation-name: popInRight; } @keyframes popInRight { 0% { -webkit-transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .popInTop { -webkit-animation-name: popInTop; animation-name: popInTop; } @keyframes popInTop { 0% { -webkit-transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popInBottom { -webkit-animation-name: popInBottom; animation-name: popInBottom; } @keyframes popInBottom { 0% { -webkit-transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1); opacity: 0; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } 80% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03); } 100% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1); transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } .popOut { -webkit-animation-name: popOut; animation-name: popOut; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08); transform: scale3d(1.08, 1.08, 1.08); } 80% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .popOutLeft { -webkit-animation-name: popOutLeft; animation-name: popOutLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0); } } .popOutRight { -webkit-animation-name: popOutRight; animation-name: popOutRight; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0); } } .popOutTop { -webkit-animation-name: popOutTop; animation-name: popOutTop; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: top center; transform-origin: top center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0); } } .popOutBottom { -webkit-animation-name: popOutBottom; animation-name: popOutBottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes popOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0); } } .flip { -webkit-animation-name: flip; animation-name: flip; } @keyframes flip { from { -webkit-transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 50% { -webkit-transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2); -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } to { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035); } } .flipInX { -webkit-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes flipInX { from { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } 50% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1); } to { -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } } .flipInY { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes flipInY { from { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } 50% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1); } to { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; } @keyframes flipOutX { from { -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1); } to { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2); } } .flipOutY { -webkit-animation-name: flipOutY; animation-name: flipOutY; } @keyframes flipOutY { from { -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1); } to { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2); } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInRight { 0% { -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInLeft { 0% { -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInTop { -webkit-animation-name: fadeInTop; animation-name: fadeInTop; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInTop { 0% { -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); opacity: 0; } 50% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeInBottom { -webkit-animation-name: fadeInBottom; animation-name: fadeInBottom; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeInBottom { 0% { -webkit-transform: translate3d(0, 400px, 0); transform: translate3d(0, 400px, 0); opacity: 0; } 50% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); opacity: 0; } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 100% { -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); opacity: 0; } } .fadeOutTop { -webkit-animation-name: fadeOutTop; animation-name: fadeOutTop; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutTop { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 40% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, -300px, 0); transform: translate3d(0, -300px, 0); opacity: 0; } } .fadeOutBottom { -webkit-animation-name: fadeOutBottom; animation-name: fadeOutBottom; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @keyframes fadeOutBottom { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 40% { opacity: 0.2; } 100% { -webkit-transform: translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0); opacity: 0; } } .driveInLeft { -webkit-animation-name: driveInLeft; animation-name: driveInLeft; -webkit-animation-duration: 3s; animation-duration: 3s; } @keyframes driveInLeft { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInRight { -webkit-animation-name: driveInRight; animation-name: driveInRight; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveInRight { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInTop { -webkit-animation-name: driveInTop; animation-name: driveInTop; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveInTop { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveInBottom { -webkit-animation-name: driveInBottom; animation-name: driveInBottom; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveInBottom { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); } 30% { opacity: 1; } 60% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .driveOutLeft { -webkit-animation-name: driveOutLeft; animation-name: driveOutLeft; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(-400px, 0, 0); transform: translate3d(-400px, 0, 0); } } .driveOutRight { -webkit-animation-name: driveOutRight; animation-name: driveOutRight; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(400px, 0, 0); transform: translate3d(400px, 0, 0); } } .driveOutTop { -webkit-animation-name: driveOutTop; animation-name: driveOutTop; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); } } .driveOutBottom { -webkit-animation-name: driveOutBottom; animation-name: driveOutBottom; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes driveOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 30% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 60% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: translate3d(0, 300px, 0); transform: translate3d(0, 300px, 0); } } .spin { -webkit-animation-name: spin; animation-name: spin; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } @keyframes spin { 0% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); -webkit-transform-origin: center center; transform-origin: center center; } 20% { -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); -webkit-transform-origin: center center; transform-origin: center center; } 70% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: rotateZ(380deg); transform: rotateZ(380deg); -webkit-transform-origin: center center; transform-origin: center center; } 100% { -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); -webkit-transform-origin: center center; transform-origin: center center; } } .spinIn { -webkit-animation-name: spinIn; animation-name: spinIn; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes spinIn { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0); transform: rotateZ(0deg) scale3d(0, 0, 0); -webkit-transform-origin: center center; transform-origin: center center; } 50% { opacity: 1; } 70% { -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1); transform: rotateZ(380deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 100% { -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1); transform: rotateZ(360deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } } .spinOut { -webkit-animation-name: spinOut; animation-name: spinOut; -webkit-animation-duration: 2s; animation-duration: 2s; } @keyframes spinOut { 0% { -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: rotateZ(0deg) scale3d(1, 1, 1); transform: rotateZ(0deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 20% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transform: rotateZ(-20deg) scale3d(1, 1, 1); transform: rotateZ(-20deg) scale3d(1, 1, 1); -webkit-transform-origin: center center; transform-origin: center center; } 30% { opacity: 1; } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transform: rotateZ(360deg) scale3d(0, 0, 0); transform: rotateZ(360deg) scale3d(0, 0, 0); -webkit-transform-origin: center center; transform-origin: center center; } } .swoopInLeft { -webkit-animation-name: swoopInLeft; animation-name: swoopInLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInLeft { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); transform: scaleX(1.5) translate3d(-400px, 0, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleX(1) translate3d(20px, 0, 0); transform: scaleX(1) translate3d(20px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } } .swoopInRight { -webkit-animation-name: swoopInRight; animation-name: swoopInRight; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInRight { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); transform: scaleX(1.5) translate3d(400px, 0, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); transform: scaleX(1) translate3d(-20px, 0, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } } .swoopInTop { -webkit-animation-name: swoopInTop; animation-name: swoopInTop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInTop { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); transform: scaleY(1.5) translate3d(0, -400px, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleY(1) translate3d(0, 20px, 0); transform: scaleY(1) translate3d(0, 20px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } .swoopInBottom { -webkit-animation-name: swoopInBottom; animation-name: swoopInBottom; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopInBottom { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, 250px, 0); transform: scaleY(1.5) translate3d(0, 250px, 0); } 40% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 65% { -webkit-transform: scaleY(1) translate3d(0, -20px, 0); transform: scaleY(1) translate3d(0, -20px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } } .swoopOutLeft { -webkit-animation-name: swoopOutLeft; animation-name: swoopOutLeft; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleX(1) translate3d(20px, 0, 0); transform: scaleX(1) translate3d(20px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0); transform: scaleX(1.5) translate3d(-400px, 0, 0); } } .swoopOutRight { -webkit-animation-name: swoopOutRight; animation-name: swoopOutRight; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1) translate3d(0, 0, 0); transform: scaleX(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleX(1) translate3d(-20px, 0, 0); transform: scaleX(1) translate3d(-20px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleX(1.2) translate3d(0, 0, 0); transform: scaleX(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0); transform: scaleX(1.5) translate3d(400px, 0, 0); } } .swoopOutTop { -webkit-animation-name: swoopOutTop; animation-name: swoopOutTop; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutTop { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, 20px, 0); transform: scaleY(1) translate3d(0, 20px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0); transform: scaleY(1.5) translate3d(0, -400px, 0); } } .swoopOutBottom { -webkit-animation-name: swoopOutBottom; animation-name: swoopOutBottom; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @keyframes swoopOutBottom { 0% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1) translate3d(0, 0, 0); transform: scaleY(1) translate3d(0, 0, 0); } 40% { opacity: 1; -webkit-transform: scaleY(1) translate3d(0, -20px, 0); transform: scaleY(1) translate3d(0, -20px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); -webkit-transform: scaleY(1.2) translate3d(0, 0, 0); transform: scaleY(1.2) translate3d(0, 0, 0); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: scaleY(1.5) translate3d(0, 200px, 0); transform: scaleY(1.5) translate3d(0, 200px, 0); } } .fold { -webkit-animation-name: fold; animation-name: fold; } @keyframes fold { 0% { -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(1, 0.4, 1); transform: scale3d(1, 0.4, 1); } 60% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 0.4, 1); transform: scale3d(0.4, 0.4, 1); } 100% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -webkit-transform: scale3d(0.2, 0.2, 0.2); transform: scale3d(0.2, 0.2, 0.2); } } .unfold { -webkit-animation-name: unfold; animation-name: unfold; } @keyframes unfold { 0% { opacity: 0; -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } 30% { opacity: 1; -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 0.4, 1); transform: scale3d(0.4, 0.4, 1); } 60% { -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -webkit-transform: scale3d(0.4, 1, 1); transform: scale3d(0.4, 1, 1); } 100% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .delay-100 { -webkit-animation-delay: .1s; animation-delay: .1s; } .delay-150 { -webkit-animation-delay: 150ms; animation-delay: 150ms; } .duration-100 { -webkit-animation-duration: .1s; animation-duration: .1s; } .duration-150 { -webkit-animation-duration: 150ms; animation-duration: 150ms; } .delay-200 { -webkit-animation-delay: .2s; animation-delay: .2s; } .delay-250 { -webkit-animation-delay: 250ms; animation-delay: 250ms; } .duration-200 { -webkit-animation-duration: .2s; animation-duration: .2s; } .duration-250 { -webkit-animation-duration: 250ms; animation-duration: 250ms; } .delay-300 { -webkit-animation-delay: .3s; animation-delay: .3s; } .delay-350 { -webkit-animation-delay: 350ms; animation-delay: 350ms; } .duration-300 { -webkit-animation-duration: .3s; animation-duration: .3s; } .duration-350 { -webkit-animation-duration: 350ms; animation-duration: 350ms; } .delay-400 { -webkit-animation-delay: .4s; animation-delay: .4s; } .delay-450 { -webkit-animation-delay: 450ms; animation-delay: 450ms; } .duration-400 { -webkit-animation-duration: .4s; animation-duration: .4s; } .duration-450 { -webkit-animation-duration: 450ms; animation-duration: 450ms; } .delay-500 { -webkit-animation-delay: .5s; animation-delay: .5s; } .delay-550 { -webkit-animation-delay: 550ms; animation-delay: 550ms; } .duration-500 { -webkit-animation-duration: .5s; animation-duration: .5s; } .duration-550 { -webkit-animation-duration: 550ms; animation-duration: 550ms; } .delay-600 { -webkit-animation-delay: .6s; animation-delay: .6s; } .delay-650 { -webkit-animation-delay: 650ms; animation-delay: 650ms; } .duration-600 { -webkit-animation-duration: .6s; animation-duration: .6s; } .duration-650 { -webkit-animation-duration: 650ms; animation-duration: 650ms; } .delay-700 { -webkit-animation-delay: .7s; animation-delay: .7s; } .delay-750 { -webkit-animation-delay: 750ms; animation-delay: 750ms; } .duration-700 { -webkit-animation-duration: .7s; animation-duration: .7s; } .duration-750 { -webkit-animation-duration: 750ms; animation-duration: 750ms; } .delay-800 { -webkit-animation-delay: .8s; animation-delay: .8s; } .delay-850 { -webkit-animation-delay: 850ms; animation-delay: 850ms; } .duration-800 { -webkit-animation-duration: .8s; animation-duration: .8s; } .duration-850 { -webkit-animation-duration: 850ms; animation-duration: 850ms; } .delay-900 { -webkit-animation-delay: .9s; animation-delay: .9s; } .delay-950 { -webkit-animation-delay: 950ms; animation-delay: 950ms; } .duration-900 { -webkit-animation-duration: .9s; animation-duration: .9s; } .duration-950 { -webkit-animation-duration: 950ms; animation-duration: 950ms; } .delay-1000 { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-1250 { -webkit-animation-delay: 1250ms; animation-delay: 1250ms; } .delay-1500 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1750 { -webkit-animation-delay: 1750ms; animation-delay: 1750ms; } .duration-1000 { -webkit-animation-duration: 2s; animation-duration: 2s; } .duration-1250 { -webkit-animation-duration: 1250ms; animation-duration: 1250ms; } .duration-1500 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .duration-1750 { -webkit-animation-duration: 1750ms; animation-duration: 1750ms; } .delay-2000 { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-2250 { -webkit-animation-delay: 2250ms; animation-delay: 2250ms; } .delay-2500 { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .delay-2750 { -webkit-animation-delay: 2750ms; animation-delay: 2750ms; } .duration-2000 { -webkit-animation-duration: 2s; animation-duration: 2s; } .duration-2250 { -webkit-animation-duration: 2250ms; animation-duration: 2250ms; } .duration-2500 { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } .duration-2750 { -webkit-animation-duration: 2750ms; animation-duration: 2750ms; } .delay-3000 { -webkit-animation-delay: 3s; animation-delay: 3s; } .delay-3250 { -webkit-animation-delay: 3250ms; animation-delay: 3250ms; } .delay-3500 { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; } .delay-3750 { -webkit-animation-delay: 3750ms; animation-delay: 3750ms; } .duration-3000 { -webkit-animation-duration: 3s; animation-duration: 3s; } .duration-3250 { -webkit-animation-duration: 3250ms; animation-duration: 3250ms; } .duration-3500 { -webkit-animation-duration: 3.5s; animation-duration: 3.5s; } .duration-3750 { -webkit-animation-duration: 3750ms; animation-duration: 3750ms; } .delay-4000 { -webkit-animation-delay: 4s; animation-delay: 4s; } .delay-4250 { -webkit-animation-delay: 4250ms; animation-delay: 4250ms; } .delay-4500 { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; } .delay-4750 { -webkit-animation-delay: 4750ms; animation-delay: 4750ms; } .duration-4000 { -webkit-animation-duration: 4s; animation-duration: 4s; } .duration-4250 { -webkit-animation-duration: 4250ms; animation-duration: 4250ms; } .duration-4500 { -webkit-animation-duration: 4.5s; animation-duration: 4.5s; } .duration-4750 { -webkit-animation-duration: 4750ms; animation-duration: 4750ms; } .delay-5000 { -webkit-animation-delay: 5s; animation-delay: 5s; } .delay-5250 { -webkit-animation-delay: 5250ms; animation-delay: 5250ms; } .delay-5500 { -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } .delay-5750 { -webkit-animation-delay: 5750ms; animation-delay: 5750ms; } .duration-5000 { -webkit-animation-duration: 5s; animation-duration: 5s; } .duration-5250 { -webkit-animation-duration: 5250ms; animation-duration: 5250ms; } .duration-5500 { -webkit-animation-duration: 5.5s; animation-duration: 5.5s; } .duration-5750 { -webkit-animation-duration: 5750ms; animation-duration: 5750ms; } .duration-6000 { -webkit-animation-duration: 6s; animation-duration: 6s; } .duration-6250 { -webkit-animation-duration: 6250ms; animation-duration: 6250ms; } .duration-6500 { -webkit-animation-duration: 6.5s; animation-duration: 6.5s; } .duration-6750 { -webkit-animation-duration: 6750ms; animation-duration: 6750ms; } .duration-7000 { -webkit-animation-duration: 7s; animation-duration: 7s; } .duration-7250 { -webkit-animation-duration: 7250ms; animation-duration: 7250ms; } .duration-7500 { -webkit-animation-duration: 7.5s; animation-duration: 7.5s; } .duration-7750 { -webkit-animation-duration: 7750ms; animation-duration: 7750ms; } .duration-8000 { -webkit-animation-duration: 8s; animation-duration: 8s; } .duration-8250 { -webkit-animation-duration: 8250ms; animation-duration: 8250ms; } .duration-8500 { -webkit-animation-duration: 8.5s; animation-duration: 8.5s; } .duration-8750 { -webkit-animation-duration: 8750ms; animation-duration: 8750ms; } .duration-9000 { -webkit-animation-duration: 9s; animation-duration: 9s; } .duration-9250 { -webkit-animation-duration: 9250ms; animation-duration: 9250ms; } .duration-9500 { -webkit-animation-duration: 9.5s; animation-duration: 9.5s; } .duration-9750 { -webkit-animation-duration: 9750ms; animation-duration: 9750ms; } .duration-10000 { -webkit-animation-duration: 10s; animation-duration: 10s; } .duration-10250 { -webkit-animation-duration: 10250ms; animation-duration: 10250ms; } .duration-10500 { -webkit-animation-duration: 10.5s; animation-duration: 10.5s; } .duration-10750 { -webkit-animation-duration: 10750ms; animation-duration: 10750ms; } /*# sourceMappingURL=vivify.css.map */ @keyframes yidong{ 0%{ top:19px;left:500px; opacity:0; } 50%{ top:19px;left:250px; opacity:0; } 100%{ top:19px;left:55px; opacity:1; } } @keyframes yidong1{ 0%{ top:0px;right:500px; opacity:0; } 50%{ top:0px;right:250px; opacity:0; } 100%{ top:0px;right:126px; opacity:1; } } @keyframes yidong2{ 0%{ top:162px;left:500px; opacity:0; } 50%{ top:162px;left:250px; opacity:0; } 100%{ top:162px;left:226px; opacity:1; } } @keyframes yidong3{ 0%{ top:199px;right:500px; opacity:0; } 50%{ top:199px;right:250px; opacity:0; } 100%{ top:199px;right:0px; opacity:1; } } @keyframes yidong4{ 0%{ top:287px;left:500px; opacity:0; } 50%{ top:287px;left:250px; opacity:0; } 100%{ top:287px;left:0px; opacity:1; } } @keyframes yidong5{ 0%{ top:301px;right:700px; opacity:0; } 50%{ top:301px;right:250px; opacity:0; } 100%{ top:301px;right:232px; opacity:1; } } @keyframes yidong6{ 0%{ top:214px;left:868px; opacity:0; } 50%{ top:214px;left:668px; opacity:0; } 100%{ top:214px;left:0px; opacity:1; } } .tpty{-webkit-animation-name: tpty1;animation-name: tpty1;-webkit-animation-duration:5s;animation-duration: 5s; } @keyframes tpty1 { 0% { transform: scale3d(1, 1, 1);} 50% { transform: scale3d(1.01, 1.01, 1.01); } 100% { transform: scale3d(1, 1, 1);} } .fada{-webkit-animation-name: fada;animation-name: fada;-webkit-animation-duration:2s;animation-duration: 2s;animation-iteration-count:infinite; } @keyframes fada { 0% {opacity:0.6; transform: scale3d(1, 1, 1);} 50% { opacity:1; transform: scale3d(1.2, 1.2, 1.2); } 100% { opacity:0.6; transform: scale3d(1, 1, 1);} } @keyframes myfirst { from {bottom:-500px;right:-1000px;} to {bottom:0px;right:0px;} } @-moz-keyframes myfirst /* Firefox */ { from {bottom:-500px;right:-1000px;} to {bottom:0px;right:0px;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {bottom:-500px;right:-1000px;} to {bottom:0px;right:0px;} } @-o-keyframes myfirst /* Opera */ { from {bottom:-500px;right:-1000px;} to {bottom:0px;right:0px;} } @keyframes whirl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ====== rollerLeft ====== */ .rollerLeft{ animation-name: rollerLeft; -webkit-animation-name: rollerLeft; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @keyframes rollerLeft { 0% { transform: translateX(200px) rotate(0); opacity: 0; } 100% { transform: translateX(0) rotate(-2turn); opacity: 1; } } @-webkit-keyframes rollerLeft { 0% { -webkit-transform: translateX(200px) rotate(0); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(-2turn); opacity: 1; } } .zankai{animation-name: zankai; -webkit-animation-name: zankai; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;} @keyframes zankai { 0% { width:0px; opacity: 0; } 100% { width:100%; opacity: 1; } } .shake1 {animation:shake1 5s infinite;-mzoanimation:shake1 5s infinite;-webkit-animation:shake1 5s infinite;-o-animation:shake1 5s infinite;} .shake2 {animation:shake1 5s infinite;-mzoanimation:shake2 5s infinite;-webkit-animation:shake2 5s infinite;-o-animation:shake2 5s infinite;} .fdsx {animation:fdsx 5s infinite;-mzoanimation:fdsx 5s infinite;-webkit-animation:fdsx 5s infinite;-o-animation:fdsx 5s infinite;} .fdsxw {animation:fdsxw 5s infinite;-mzoanimation:fdsxw 5s infinite;-webkit-animation:fdsxw 5s infinite;-o-animation:fdsxw 5s infinite;} .xiaon {animation:xiaon 5s infinite;-mzoanimation:xiaon 5s infinite;-webkit-animation:xiaon 5s infinite;-o-animation:xiaon 5s infinite;} @keyframes xiaon { 0% { width:0;opacity:1; } 100% { width:100;opacity:1; } } @keyframes fdsx { 0% { transform: translateY(0) translateZ(100px) scaleY(1.05) perspective(50px); } 50% { transform: translateY(0%) translateZ(5000px) scaleY(1) perspective(50px) ; } 100% { transform: translateY(0%) translateZ(-500px) scaleY(1.05) perspective(50px); } } @keyframes fdsxw { 0% { transform: translateX(0) translateZ(100px) scaleX(1.05) perspective(50px); } 50% { transform: translateX(0%) translateZ(5000px) scaleX(1) perspective(50px) ; } 100% { transform: translateX(0%) translateZ(-500px) scaleX(1.05) perspective(50px); } } .fdsx1 {animation:fdsx1 5s infinite;-mzoanimation:fdsx1 5s infinite;-webkit-animation:fdsx1 5s infinite;-o-animation:fdsx1 5s infinite;} @keyframes fdsx { 0% { transform: scale(1.05) ; } 50% { transform: scale(1) ; } 100% { transform: scale(1.05); } }